<template>
  <div class="local">
    <transition name="fade-in">
    <div class="main-bg" v-if="stepy === 1">
      <div class="payment-success" v-if="(orderId.lengt<3)">
        <img class="success-ico" src="../../assets/success.png" alt="">
        <p class="success-text">支付成功</p>
      </div>
      <div class="header">
        <div class="left-btn" @click="registerClick">如何使用</div>
        <div class="right-btn" @click="record">购买记录</div>
      </div>
      <div v-if="!noAd">
        <div style="width:100%;height:48px;">
          <div id="nav" :class="searchBarFixed == true ? 'isFixed' :''">
            <ly-tab
                v-model="selectedId"
                :items="items"
                :options="options"
                @change="handleChange">
            </ly-tab>
          </div>
        </div>
        <div class="container"  ref="container">
          <div class="content">
            <div class="hot-top" v-for="(item, index) in items[selectedId].hotList" :key="index">
              <div class="item-content">
                  <div class="item-top">
                    <img :src="item.images" alt="">
                    <div class="right-tit">
                      <p class="item-title">{{item.name}}</p>
                      <p class="subhead">{{item.content}}</p>
                      <p class="item-label"><span>{{item.typeText}}</span>仅剩{{item.remainNumber}}张</p>
                      <div class="buy-btn"  :data-id="item.id" :data-buyPrice="item.buyPrice" @click="payBtn(item.buyPrice,item.id)">{{item.buyPrice}}元抢</div>
                    </div>
                  </div>
                  <div class="item-bottom">
                    <p>电话：{{item.shopSharePhone?(item.shopPhone+"/"+item.shopSharePhone):item.shopPhone}}</p>
                    <p>地址：{{item.shopAddress}}（<span v-if="appLng">距您{{item.distance/1000}}km</span>）</p>
                    <p class="p-last">营业时间：{{item.bussinessTime}}</p>
                  </div>
              </div>
            </div>

            <ul class="ul-list">
              <li class="item" v-for="(item, index) in items[selectedId].adList" :key="index">
                <div class="item-content">
                  <div class="item-top">
                    <img :src="item.images" alt="">
                    <div class="right-tit">
                      <p class="item-title">{{item.name}}</p>
                      <p class="subhead">{{item.content}}</p>
                      <p class="item-label"><span>{{item.typeText}}</span>仅剩{{item.remainNumber}}张</p>
                      <div class="buy-btn" @click="payBtn(item.buyPrice,item.id)">{{item.buyPrice}}元抢</div>
                    </div>
                  </div>
                  <div class="item-bottom">
                    <p>电话：{{item.shopSharePhone?(item.shopPhone+"/"+item.shopSharePhone):item.shopPhone}}</p>
                    <p>地址：{{item.shopAddress}}（<span v-if="appLng">距您{{item.distance/1000}}km</span>）</p>
                    <p class="p-last">营业时间：{{item.bussinessTime}}</p>
                  </div>

                </div>
                <div class="bottom-shadow"></div>
              </li>
            </ul>
            <div class="loading" v-show="loading">{{loadingTXT}}</div>
          </div>
        </div>

      </div>
      <div class="noAd" v-if="noAd" >
        <p>当前城市未开通</p>
      </div>
    </div>
    </transition>
    <transition name="fade-in" >
      <div class="main-bg" v-if="stepy === 2">
        <div class="main1" v-if="q_user_ad.length!=0">
          <ul class="ul-list">
            <li class="item" v-for="(item, index) in q_user_ad" :key="index">
              <div class="item-content">
                <div class="item-top">
                  <img :src="item.images" alt="">
                  <div class="right-tit">
                    <p class="item-title">{{item.productName}}</p>
                    <p class="subhead">{{item.content}}</p>
                    <p class="item-label"><span  style="margin-bottom:.1rem;">{{item.typeText}}</span></p>
                  </div>
                </div>
                <div class="item-bottom">
                  <p>电话：{{item.shopSharePhone?(item.shopPhone+"/"+item.shopSharePhone):item.shopPhone}}</p>
                  <p>地址：{{item.shopAddress}}</p>
                  <p>营业时间：{{item.bussinessTime}}</p>
                  <p>有效期至：{{item.createTime}} - {{item.expireTime}}</p>
                  <p>购买价格：{{item.amount}}</p>
                  <p class="p-last">使用说明：{{item.remark}}</p>
                </div>

              </div>
              <div class="bottom-shadow"></div>
            </li>
          </ul>
        </div>
        <div class="nodata" v-if="q_user_ad.length==0">
          <p>暂无购买记录</p>
        </div>
      </div>
    </transition>
    <!-- 如何使用 -->
    <div class="note" :class="{ 'bg': isNote, 'modal_show': isNote }" >
      <div class="dialog">
        <i class="note-tit"></i>
        <div class="note_content">
          <p>1、首先在“六个轮子”APP中抢购相应的优惠，购买后24小时有效！</p>
          <p>2、到对应的店铺完成消费； </p>
          <p>3、在结算时打开“六个轮子”APP；</p>
          <p>4、进入个人中心>我的优惠券;</p>
          <p>5、向商家展示一下即可享受六个轮子会员专享的优惠买单啦！</p>
        </div>
        <div class="note_btnBox">
          <div class="clear_send" @click="clearClick()">我知道了</div>
        </div>
      </div>
    </div>
    <!-- 支付 -->
    <div class="shade" :class="{ 'bg': isActive, 'modal_show': isActive }" >
      <div class="share" :class="{ 'fadeInUpBig': isActive, 'fadeInDownBig': isActive }">
        <div class="pop-up-header">余额不足，请选择<span style="float:right;margin-right:0.3rem"   @click='clearBtn'>X</span></div>
        <div class="practical">需要付款<span>{{buyPrice}}</span></div>
        <div class="type type1">
          <label><input name="chargeType" type="radio" value="1" v-model="type"/>
            <i class="icon-alipay icon"></i>支付宝支付
            <i class="selectIcon" v-bind:class="{selected:type == 1}"></i>
          </label>
          <label><input name="chargeType" type="radio" value="2" v-model="type" />
            <i class="icon-wepay icon"></i>微信支付
            <i class="selectIcon" v-bind:class="{selected:type == 2}"></i>
          </label>
        </div>
        <div  class="btn" @click='payBtn1' >确&nbsp;认&nbsp;支&nbsp;付</div>
      </div>
    </div>
    <simplert ref="simplert"></simplert>
  </div>
</template>
<script>
// import slider from "./test11";
// import BScroll from "better-scroll";
var wx = require('weixin-js-sdk');
 import Simplert from '../../components/dialog/dialog.vue';
  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  };
var navOffterTop;

export default {
  data(){
    return{
      searchBarFixed:false,
      selectedId: 0,
      items: [

      ],
      options: {
        activeColor: '#ff5d2e'
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
      tabItemName:"全部",
      activeIndex:0,
      list:[],
      loading:false,
      pulldownMsg:'刷新',
      loadingTXT:"无更多数据",

      topState:true,
      navOffterTop:0,
      ADList:[],//列表，
      hotList:[],//最热列表
      isNote:false,//弹窗显示隐藏
      token:'',//token
      orderId:'',//订单id
      areaCode:'',//城市code
      wxuser:'',//小程序环境
      appLng:'',//
      appLat:'',
      stepy:1,//页脚
      q_user_ad:[],   //购买记录
      isGoback:false, //小程序兼容顶部判断
      noAd:false,     //城市未开通 判断
      nodata:false,   //购买数据判断
      isActive:false,
      type:1,
      buyPrice:0,

    }
  },
  components:{
    Simplert
  },
  mounted(){
    let _this = this;
    //绑定导航事件
    window.addEventListener('scroll', this.handleScroll);
    //支付回调
    window.payResult = (result,msg)=>{
      if(result === 'true' || result == 1)
      {
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/Android/i)){
          window.control.refreshWallet();
        }else if(userAgentObj.match(/iPhone/i))
        {
          refreshWallet();
        }
        this.open('购买成功！',false,'','','fade_success',function(){
          _this.record()
        });
      }else{
        this.open(msg,false,'','','fade_alert',function(){});
      }
    };
    let url = window.location.href;
    // alert(JSON.stringify(url))
    // 城市code
    this.areaCode = filters.parseURL(url).params.areaCode;
    if(url.indexOf('orderId')>0){
      // 订单号
      this.orderId = filters.parseURL(url).params.orderId;
    }else{
      this.orderId =''
    }
    // this.navOffterTop = document.querySelector('#nav').offsetTop;
    // console.log(this.navOffterTop)
    // 坐标
    this.appLng = filters.parseURL(url).params.appLng;
    this.appLat = filters.parseURL(url).params.appLat;
    //微信小程序 个人中心 进入
    this.wxuser = filters.parseURL(url).params.wxuser;
    if(url.indexOf('wx_app')>0){
      this.wx_app = filters.parseURL(url).params.wx_app;
      this.detail = filters.parseURL(url).params.detail;
      if(this.detail){
        //
        this.isGoback=true
      }
    }else{
      this.wx_app = ''
    }
    this.$util.getUserToken().then(token=>{
      _this.token = token;
      // let tokens="eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NjAyMTE4ODY5Iiwic2VjcmV0IjoiM2RmZDBkYTM5Yjg0Nzg1ZGU5ZDQ2MDVmZTQxN2FmN2UifQ.Rv8A4mMYZqK_HpjAbtHVJd0aCoUQ4OV-vBLc883rh8w";
      _this.navList(token);
      _this.commodityList(token,0,1,10);
      if(_this.wxuser=='1'){
        _this.record()
      }
    }).catch(e=>{
      _this.open('数据获取失败',false,'','','fade_alert',function(){});
    })
    // this.navOffterTop = document.querySelector('#nav').offsetTop;

  },
  beforeDestroy(){
    console.log(document.querySelector('#nav'))
  },
  methods: {
    open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
      let obj = {
        title: title,
        useConfirmBtn: confirmBtn,
        customConfirmBtnText: customConfirmBtnText,
        onConfirm:onConfirm,
        type: type,
        onClose:onClose,
        message:message
      }
      this.$refs.simplert.openSimplert(obj)
    },
    // 关闭支付弹窗
    clearBtn(){
      this.isActive=false
    },
    // 显示弹窗
    registerClick(){
      this.isNote=!this.isNote
    },
    // 关闭如何使用弹窗
    clearClick(){
      this.isNote=!this.isNote
    },
  navList(){
      let _this = this;
      this.$api.get('/ad/v1/category_list','',s=>{
        console.log(s);
        let items=[];
        let arr = s.module.length;
        for(var i=0;i<arr;i++){
          items.push({
            label: s.module[i].category,
            categoryCode: s.module[i].categoryCode,
            adList: [],
            hotList: [],
            pageNo:1,
            pageSize:10,
            lastState:false
          })
        }
        _this.items = items;
      },f=>{
        this.open(f.errorMessage);
      },{
        // "token": token
      })
    },
    commodityList(token,categoryCode,page,pagesize){
      if(categoryCode == 0){
        categoryCode ='';
      }
      let num = 0
      let _this = this;
      _this.$api.get('/ad/v1/authApi/list?orderId='+this.orderId+'&areaCode='+this.areaCode+'&categoryCode='+categoryCode+'&lng='+this.appLng+'&lat='+this.appLat+'&pageNo='+page+'&pageSize='+pagesize,{},s=>{
        console.log(s.module)

        if(s.module){
          // console.log(s.module.list.length)
          if(categoryCode !=''){
            num = categoryCode;
            // console.log(num)
          }

            let arr = s.module.list;
            _this.grouping(arr,num)
            // console.log(num)
            if(s.module.list.length==10){
              _this.items[num].pageNo++;
              _this.loading = false ;
            }else{
              // console.log('进来了'+num)
              _this.loading = true ;
              _this.items[num].lastState = true;
            }
          }
        // }
      },f=>{
        if(f.resultCode=="30031"){
          _this.noAd=true;
        }else{
          _this.open(f.errorMessage,false,'','','fade_alert',function(){});
        }
      },{
        'requestPlatform': this.wx_app,
        "token": token
      })
    },
    // 排序方法
    grouping(arr,num){
      for(var i=0;i<arr.length;i++){
        if(arr[i].isTop){
          this.items[num].hotList.push(arr[i]);
        }else{
          this.items[num].adList.push(arr[i]);
        }
      }
    },
    record(){
      this.stepy++;
      let _this =this;
      _this.$api.get('/ad/v1/authApi/q_user_ad_od?pageNo=1&pageSize=50',{},s=>{
        console.log(s.module)
        if(s.module){
          _this.q_user_ad=s.module.list
        }else{
          this.nodata=true
        }

      },f=>{
        _this.open(f.errorMessage,false,'','','fade_alert',function(){});
      },{
        'requestPlatform': this.wx_app,
        "token": this.token
      })
    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // var offsetTop = document.querySelector('#nav').offsetTop;
      if(this.topState){
        this.topState = false;
        navOffterTop = document.querySelector('#nav').offsetTop;
      }
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      if (scrollTop > navOffterTop) {
      // if (scrollTop > 255) {
        this.searchBarFixed = true
      } else {
        this.searchBarFixed = false
      }
      if(scrollTop+windowHeight==scrollHeight){
                //写后台加载数据的函数
          this.createEl()
//          	console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
      }   

        // console.log(scrollTop,offsetTop,scrollHeight,windowHeight)
    },
    // 切换导航事件
    handleChange (item, index) {
      this.tabItemName = item.label;
      this.activeIndex = index;
      console.log(index)
      this.createEl();
    },
    createEl(){
      //上滑加载

      let token = this.token;
      let categoryCode = this.activeIndex;
      let page = this.items[categoryCode].pageNo;
      let pagesize = this.items[categoryCode].pageSize;
      console.log(categoryCode,this.items[categoryCode].lastState)
      if(this.items[categoryCode].lastState){
        return false;
      }
      this.commodityList(token,categoryCode,page,pagesize)

    },
    payBtn(buyPrice,id){
        // let adProductId = e.target.getAttribute('data-id');
        let adProductId = id;
        this.buyPrice=buyPrice;
        if(!this.wx_app){
            let userAgentObj = navigator.userAgent;
            if(userAgentObj.match(/MicroMessenger/i)){
              if(userAgentObj.match(/Android/i)){
                window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
              }else if(userAgentObj.match(/iPhone/i)) {
                window.setTimeout(function(){
                  window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                },200)
              }else{
                window.location.href="http://download.xingjiakeji.com/";
              }
              return;
            }else{
              if(!this.token || this.token == undefined || this.token == ""){
                window.setTimeout(function(){
                  if(userAgentObj.match(/Android/i)){
                    window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919';
                  }else if(userAgentObj.match(/iPhone/i)) {
                    window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                  }
                },1000);
                return;
              }
            }
        }

        if(this.postState){
          return
        }else{
          this.postState = true;
        }
        const _this = this;
        this.open('确认购买',true,'确认',function(){
          _this.$api.post('/trade/v1/authApi/money/pay/orderAndPayAdProduct?adProductId='+adProductId,{},s=>{
            _this.postState = false;
            let userAgentObj = navigator.userAgent;
            _this.open('购买成功',false,'','','fade_success',function(){
              _this.record();
              // //兼容小程序
              // if(_this.wx_app){
              //     if(_this.detail == 'true'){
              //       wx.miniProgram.reLaunch({url: '../detail/detail?orderId=' + _this.orderId})
              //     }
              // }else{
              //   if(userAgentObj.match(/Android/i)){
              //     window.control.refreshWallet();
              //   }else if(userAgentObj.match(/iPhone/i)){
              //     refreshWallet();
              //   }
              //   _this.$router.go(-1)
              // }
            })
          },f=>{
            _this.postState = false;
            if(f.resultCode == '30006'){
              // _this.isActive=true
              // _this.open('余额不足请先充值！',true,'充值',function(){
                let userAgentObj = navigator.userAgent;
                //兼容小程序
                if(_this.wx_app){//小程序支付
                  wx.miniProgram.navigateTo({url: '../user/balance/balance?detail=true'})
                }else{//app处理逻辑
                  // _this.open('',false,'知道了',function(){},'',function(){},"余额不足，请前往个人中心->我的钱包,充值后再尝试购买！如有疑问，请联系客服！")
                  if(userAgentObj.match(/Android/i)){
                    window.control.payDialog(_this.buyPrice);
                  }else if(userAgentObj.match(/iPhone/i)){
                    payDialog(_this.buyPrice);
                  }
                }
              // })
            }else if(f.errorMessage){
              _this.open(f.errorMessage,false,'','','fade_alert',function(){});
            }else{
              _this.open('购买失败',false,'','','fade_alert',function(){

              });
            }
          },{
            'requestPlatform': _this.wx_app,
            'token': _this.token
          })
        },'',function(){
          _this.postState = false;
        },"确认购买商家优惠？")
      },
    payBtn1(){
      // alert(this.type+','+this.buyPrice+','+159)
      let userAgentObj = navigator.userAgent;
      if(userAgentObj.match(/Android/i)){
        window.control.payDialog(0.01);
      }else if(userAgentObj.match(/iPhone/i)){
        payDialog(0.01);
      }

    }
  }
}
</script>
<style>
html{

}
body,#app,.local,.main-bg{
  margin:0;
  position:relative;
  z-index:100;
  min-height:10.66rem;
  background:#fff;
}

.local .ly-tabbar{
    position: relative;
    background-color: #eee;
    width: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    border-bottom: none;
    box-shadow: none;
}
.local .ly-tab-list {
    position: relative;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 14px 5px;
    min-width: 100%;
}
</style>

<style scoped >
* {
  margin:0;
  padding:0;
  box-sizing:border-box;;
}
html{
  /*overflow-x:hidden;*/
  overflow-y:auto;
  font-size:62.5%;
}

body {
  color:#333;
  font-size:14px;
  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;
  margin: 0;
  background-color:#fff;
}

a {
  text-decoration:none;
  color:#4e4e4e;
  font-size:14px;
  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;
  -webkit-font-smoothing: antialiased;
}
textarea,input,select{font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;}
img {
  border:0;
  vertical-align:top;
}
ol, ul, li {
  list-style:none;
}
dl, dt, dd, ul, li {
  margin:0;
  padding:0;
}
input,textarea{outline: none;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
.pull-left{ float:left !important; float:left;  }
.pull-right{ float:right !important; float:right;  }
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after{
  clear: both;
}
body,html{ width: 100%; height: 100%;}

  .local{
    position: relative;
    width: 100%;
    height: 100%;
    font-size:24px;
  }
  .payment-success{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    width:100%;
    height:2.74rem;
  }
  .success-ico{
    width:1.07rem;
    height:1.07rem;
  }
  .success-text{
    margin-top:.18rem;
    font-size:.34rem;
    font-weight:600;
  }
  .header{
    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-around;
    width:100%;
    height:2.36rem;
    background:url('../../assets/header-bg.png');
    background-size:100% 100%;
  }
  .left-btn,.right-btn{
    width:1.6rem;
    height:0.5rem;
    margin-top:.9rem;
    margin-left:1.4rem;
    font-size: 13px;
    text-align: center;
    line-height: 0.5rem;
    border-radius: 0.3rem;
    background: #fff;
    color:#ff5d2e;
  }
  .right-btn{
    margin-left:0;
    margin-right:1.4rem;
  }
  .isFixed{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
  }
  .hot-top{
    overflow: hidden;
    width:7.5rem;
    min-height:3.5rem;
    padding:.15rem;
    margin-top:.2rem;
    background:url('../../assets/item-bg.png');
    background-size: 100% 100%;
  }
  .item-content{
    position:relative;
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    width:6.80rem;
    min-height:2.88rem;
    margin:.15rem  auto 0;
    /* border:1px solid red; */
  }

  .ul-list{
    width:100%;
    padding:0.42rem 0;
    min-height:2rem;
  }
  .ul-list .item{
    position:relative;
    width:7.20rem;
    min-height:3.2rem;
    margin:0 auto .6rem;
    border-radius:.18rem;
    border:1px solid #eee;
  }
  .item-top{
    position:relative;
    display: flex;
    flex-direction:row;
    width:100%;
    /* min-height:1.8rem; */
    min-height:1.6rem;
    /* padding:.15rem .20rem 0 .20rem; */
    border-bottom:1px solid #efe7e2;
  }
  .item-top img{
    width:1.40rem;
    height:1.4rem;
    /* border:1px solid red; */
  }
  .item-top .right-tit{
    flex:1;
    padding-left:.24rem;
  }
  .item-title{
    font-size:.34rem;
    line-height:.34rem;
    font-weight:600;
    color:#333;
  }
  .subhead{
    width:3.6rem;
    margin-top:.2rem;
    font-size:.24rem;
    line-height:.30rem;
    color:#666;
  }
  .item-label{
    /* position:absolute;
    bottom:.12rem; */
    margin-top:.30rem;
    margin-bottom:.1rem;
    font-size:.24rem;
    line-height:.30rem;
    color:#ff5d2e;
  }
  .item-label span{
    float:left;
    display:inline-block;
    padding:0 .1rem;
    /* width:.84rem; */
    height:.30rem;
    margin-right:.10rem;
    text-align:center;
    line-height:.30rem;
    border-radius:.05rem;
    background:#0bc37d;
    color:#fff;
  }

  .bottom-shadow{
    position:absolute;
    left:0;
    bottom:-.6rem;
    width:7.2rem;
    height:.6rem;
    background:url('../../assets/bottom-ico.png');
    background-size: 100% 100%;

  }
  .buy-btn{
    position:absolute;
    top:.74rem;
    /* top:.85rem; */
    right:0;
    width:1.5rem;
    height:.66rem;
    border-radius:.66rem;
    font-size:.34rem;
    line-height:.66rem;
    text-align:center;
    background:#ff5d2e;
    color:#fff;
  }
  .item-bottom{
    margin-top:.24rem;
    font-size:.22rem;
    line-height:.36rem;
    color:#999;
  }
  .item-bottom span{
    color:#333;
  }
  .p-last{
    margin-bottom:.1rem;
  }
  .container{
    /* width: 100%;
    height: 100vh; */
    /* overflow: hidden; */

  }
  .content{
    width: 100%;
    padding-bottom: 20px;
  }
  .loading{
    text-align:center;
    font-size:14px;
    color:#999;
  }

  /* 如何使用 */
  .note{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:'z-index' .3s;
    /* transition:top 0s; */
  }
  .note.bg{
    background:rgba(0,0,0,0.6);
  }
  .dialog{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-3rem;
    margin-top:-2.9rem;
    width:6rem;
    height:5.80rem;
    border-radius:0.2rem;
    background:#fff;
  }
  .note-tit{
    display:block;
    width:3.85rem;
    height:0.35rem;
    margin:0.52rem auto 0.3rem;
    background:url(../../assets/shiy.png) no-repeat;
    background-size: 100% 100%;
  }
  .note_content{
    width:5.20rem;
    height:3.4rem;
    margin:0.44rem auto 0;
    font:0.24rem/0.38rem "Microsoft YaHei";
    color:#333;
  }
  .note_content span{
    color:#999;
  }
  .clear_send{
    position: absolute;
    bottom:0;
    width:100%;
    height:0.92rem;
    margin-top:0.23rem;
    border-radius:0.2rem;
    text-align:center;
    font:0.24rem/0.92rem "Microsoft Yahei";
    color:#ff5d2e;
    background: #f2f2f2;
  }
  .modal_show{
    z-index: 100;
  }
  .main-bg{
    width:100%;
    height:100%;
    background: #fff;
  }
  .noAd,.nodata{
    overflow: hidden;
    width:6.9rem;
    height:8rem;
    margin:2.34rem auto;
    border-radius: 0.15rem;
    background: url(../../assets/noad.jpg) no-repeat 1.7rem 2.6rem #fff;
    background-size:3.57rem 2.11rem ;
  }
  .noAd p,.nodata p{
    text-align: center;
    font-size:.30rem;
    margin-top:4.7rem;
    color:#666;
  }
  .shade{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:all .3s;
  }
  .shade.bg{
    background:rgba(0,0,0,0.6);
  }
  .share{
    width: 100%;
    height: 5.70rem;
    background-color: #fff;
    transform: translateY(100%);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 5;
    color:#eee;
  }
  .fadeInUpBig {
    animation-duration: .4s;
    animation-fill-mode: both;
    animation-name: fadeInUpBig;
  }
  .fadeInDownBig {
    animation-duration: 0.6s;
    animation-fill-mode: both;
      animation-name: fadeInDownBig;
  }

  .pop-up-header{
  position:relative;
  height:1.03rem;
  line-height: 1.03rem;
  text-align: center;
  font-size:0.31rem;
  background: #f7f7f7;
  color:#333;
}
.pop-up-header text{
  display: inline-block;
  position:absolute;
  top:0.25rem;
  right:0.10rem;
  width:0.60rem;
  height:0.60rem;
  line-height: 0.60rem;
}
.practical{
  width:92%;
  height:1.18rem;
  margin:0 auto;
  font:0.28rem/1.18rem "Microsoft Yahei";
  color:#333;
  border-bottom:1px solid #f6f6f6;
}
.practical span{
  float:right;
}
.type{
  width:92%;
  height:1.64rem;
  margin:0.22rem auto 0;
  padding: 0.35rem  0;
  font-size: 14px;
}
.type1{
  padding-top:0.1rem;
}
.type span{
  display: inline-block;
  height: 0.4rem;
  float: left;
}
.type em{
  display: inline-block;
  /*padding:0 0.15rem;*/
  border-radius: 0.32rem;
  border-bottom-left-radius: 0;
  background: #ff524c;
  font-style: normal;
  font-weight: bold;
  color: #ffffff;
  font-size: 12px;
  float: left;
}
.type>label{ padding: 0.2rem 0; display: block; line-height: 0.4rem;color:#333;}
.type>h2{ font-size: 14px; padding: 0.2rem 0;}
.type input{ display: none;}
.btn{background: #ff5d2e; width: 84%;border-radius: 0.5rem;height:1rem; margin: 0.2rem auto 0; line-height: 1rem; text-align: center; color: #fff; padding: 0;  font-size: 14px;}
.icon{
  background-size: contain;
  width: 0.36rem;
  height: 0.36rem;
  float: left;
  margin-right: 0.2rem;
  background-repeat: no-repeat;
  background-position: center;
}
.icon1{
  width:0.33rem;
  height:0.33rem;
}
.icon-money{ background-image: url("../../activities/styles/asset/charge/dollarxin.png")}
.icon-alipay{ background-image: url("../../activities/styles/asset/charge/alipayxin.png")}
.icon-wepay{ background-image: url("../../activities/styles/asset/charge/wchatxin.png")}
.selectIcon{background: url("../../activities/styles/asset/charge/empty.png") no-repeat; background-size: contain; width: 0.3rem; height: 0.3rem; float: right; margin-top: 0.05rem;}
.selectIcon.selected{ background-image: url("../../activities/styles/asset/charge/right.png")}
  @keyframes fadeInUpBig {
    from {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
      to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInDownBig {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
  }
  .shade{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:all .3s;
  }
  .shade.bg{
    background:rgba(0,0,0,0.6);
  }
  .share{
    width: 100%;
    height: 5.70rem;
    background-color: #fff;
    transform: translateY(100%);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 5;
    color:#eee;
  }
  .fadeInUpBig {
    animation-duration: .4s;
    animation-fill-mode: both;
    animation-name: fadeInUpBig;
  }
  .fadeInDownBig {
    animation-duration: 0.6s;
    animation-fill-mode: both;
      animation-name: fadeInDownBig;
  }

  .note{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:'z-index' .3s;
    /* transition:top 0s; */
  }
  .note.bg{
    background:rgba(0,0,0,0.6);
  }
  .dialog{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-3rem;
    margin-top:-2.9rem;
    width:6rem;
    height:5.80rem;
    border-radius:0.2rem;
    background:#fff;
  }
  .note-tit{
    display:block;
    width:3.85rem;
    height:0.35rem;
    margin:0.52rem auto 0.3rem;
    background:url(../../assets/shiy.png) no-repeat;
    background-size: 100% 100%;
  }
  .note_content{
    width:5.20rem;
    height:3.4rem;
    margin:0.44rem auto 0;
    font:0.24rem/0.38rem "Microsoft YaHei";
    color:#333;
  }
  .note_content span{
    color:#999;
  }

  .clear_send{
    position: absolute;
    bottom:0;
    width:100%;
    height:0.92rem;
    margin-top:0.23rem;
    border-radius:0.2rem;
    text-align:center;
    font:0.24rem/0.92rem "Microsoft Yahei";
    color:#ff5d2e;
    background: #f2f2f2;
  }
  .modal_show{
    z-index: 100;
  }

</style>

